import React, { Component } from 'react';
import { Form, Input, Row, Col, Button, message } from 'antd';
import { verification } from '@/services/login'

const countMax = 60

class RegistrationForm extends Component{

  formRef = React.createRef()

  constructor(props){
    super(props)
    this.state = {
      count: countMax,
      validateCodeDisabled: false,
      validateCodeText: '获取验证码',
    }
  }

  resetForm() {
    const form = this.formRef.current
    if (form) {
      const { resetFields } = form
      resetFields()
    }
  }

  onClickvalidateCodeBtn() {
    //发送请求，获取验证码
    this.getVerification()
  }
  async getVerification(){
    const form = this.formRef.current
    const { getFieldValue } = form
    if (getFieldValue('mobile')) {
      let res = await verification({
        mobile: getFieldValue('mobile')
      })
      if(res.data.code == '0'){
        //倒计时
        this.timerOpen()
        message.destroy()
        message.success('验证码发送成功')
      } else {
        message.error(res.data.msg)
      }
    } else {
      message.error('请输入手机号')
    }
  }

  timerOpen() {
    let { count } = this.state
    const timer = setInterval(() => {
      --count;
      if (count == 0) {
        clearInterval(timer)
        this.setState({
          validateCodeDisabled: false,
          validateCodeText: '获取验证码',
          count: countMax
        })
      } else {
        this.setState({
          count,
          validateCodeText: `${count}s后获取验证码`,
          validateCodeDisabled: true
        })
      }
    }, 1000)
  }

  render() {
    const { validateCodeDisabled, validateCodeText } = this.state
    const {onFinish} = this.props
    return (
      <Form
        className={'loginForm'}
        ref={ this.formRef }
        name="register"
        onFinish={onFinish}
        scrollToFirstError
      >
        <Form.Item
          name="mobile"
          label=""
          rules={[
            {
              required: true,
              message: '请输入手机号码!'
            },
          ]}
        >
          <Input maxLength={11} placeholder="请输入手机号码" />
        </Form.Item>
        <Form.Item
          name="password"
          label=""
          rules={[
            {
              required: true,
              message: '请输入密码!'
            },
          ]}
        >
          <Input placeholder="请输入密码" type={'password'} />
        </Form.Item>
        <Form.Item label="">
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                name="code"
                noStyle
                rules={[
                  {
                    required: true,
                    message: '请输入验证码!',
                  },
                ]}
              >
                <Input placeholder="请输入验证码"/>
              </Form.Item>
            </Col>
            <Col span={11} className={'validateCodeInput'}>
              <Button disabled={validateCodeDisabled} onClick={(e)=>{this.onClickvalidateCodeBtn.call(this, e)}}>{validateCodeText}</Button>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item >
          <Button className={'loginBtn'} type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default RegistrationForm